<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Jansansad.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>JanSansad</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="jansansad/jansansad.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>
  <div class="container">
  <div class="topband"></div>
  <div class="container1">
  <div class="main">

    <div class="mainin">
      <div class="mid">
        <div class="middle">

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <h3 align=center> Call your representative to find out their stand on the Jan Lok Pal bill, and to apprise them of your stand. </h3>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Your State:</td>
        <td id="stateContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="font-weight:bold;">Your Constituency:</td>
        <td id="constituencyContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
    
    <div id="mpDetailsContainer" style="display:none">
    <table align="center">
      <tr>
        <td>
          <table>
            <tr>
              <td class="table-key">Name</td>
              <td class="table-value" id="mpNameContainer">
            </tr>
            <tr>
              <td class="table-key">Party</td>
              <td class="table-value" id="mpPartyContainer">
            </tr>
            <tr>
              <td class="table-key">Address</td>
              <td class="table-value" id="mpAddressContainer">
            </tr>
            <tr>
              <td class="table-key">Phone</td>
              <td class="table-value" id="mpPhoneContainer">
            </tr><tr>
              <td class="table-key">EmailId</td>
              <td class="table-value" id="mpEmailContainer">
            </tr>
          </table>
        </td>
        <td id="mpImageContainer">
        </td>
      </tr>
    </table>
    <table align="center" class="formTable">
      <tr>
        <td class="formData">
        <table>
          <tr>
            <td class="table-key">Reachable</td>
            <td id="mpReachableContainer"></td>
          </tr>
          <tr>
            <td class="table-key">Support</td>
            <td id="mpSupportingContainer"></td>
          </tr>
        </table>
        <br>Number of calls made to this MP: <span id="mpCallsMadeContainer"/><br>
        <br>I called this MP to support <span class="billName"></span><br>
        <input type="radio" name="mpsupport" value="notReachable">This MP was not reachable</input><br> 
        <input type="radio" name="mpsupport" value="supportive">This MP is supportive of <span class="billName"></span></input><br>
        <input type="radio" name="mpsupport" value="nonSupportive">This MP is NOT supportive of <span class="billName"></span></input><br>
        <input type="radio" name="mpsupport" value="notSure">This MP did not know / Not sure</input><br>
        <br>My Position is <br>
        <input type="radio" name="mysupport" value="supportive">I support the <span class="billName"></span></input><br>
        <input type="radio" name="mysupport" value="supportive">I DO NOT support the <span class="billName"></span></input><br>
        <br>
        <button id="submitButton">Submit</button>
        </td>
        <td class="disclaimer">
          We are committed to TRUTH and OPENNESS
          <br>
          <br>
          Jansansad provides an easy way for citizens to contact their elected representatives
          and enquire about their positions on important bills, that concerns the citizens.
          We present the data, as represented by our users without favour of prejudice.
          For Jansansad to continue to offer this service, and keep it useful for all the citizens,
          we request you to report a call ONLY when they have personally initiated it.
          We also request that you TRUTHFULLY report the stated position of the elected representative,
          as expressed by them
        </td>
      </tr>
    </table>
    </div>
    
	<br><br>
	<div id="chartContainer">
	<h3> All India Statistics </h3>

	<table align="center">
      <tr>
      	<td align=center><h1><img src="piechart.jpg" width=200></h1>MP Reachability</td>
      	<td align=center><h1><img src="piechart.jpg" width=200></h1>National MP Position</td>
      	<td align=center><h1><img src="piechart.jpg" width=200></h1>Citizen's Position</td>
      </tr>
	</table>
	</div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>	
  </body>
</html>
